<template>
    <div class="sub-item">
        <div class="left">
            <el-image 
                class="head" 
                :src="data.currentauthor.adduserheadportraitpath"
                fit="cover"
            ></el-image>
        </div>
        <div class="right">
            <div class="name">
                {{data.currentauthor.nickname}}
            </div>

            <div class="reply">
                <div class="to">
                    回复
                    <span class="name">
                        {{data.replyauthor.nickname}}：
                    </span>
                </div>

                <div class="text">
                    {{data.content}}
                </div>
            </div>

            <div class="foot">
                <item-tool-bar
                    :layout="layout"
                    :data="data"
                    type="comment"
                    :rowguid="data.guid"
                    :comment-parent="data.guid"
                    :comment-placeholder="`回复 ${this.data.currentauthor.nickname}`"
                    @comment="commentSubmitHandler"
                    @del="delHandler"
                ></item-tool-bar>
            </div>
        </div>
    </div>
</template>

<script>
import ItemToolBar from '@components/sys/item-tool-bar/index';

import ITEM_MIXINS from '../mixins/item';

export default {
    mixins: [ITEM_MIXINS],
    components: {
        ItemToolBar,
    },
    props: {
        data: {
            type: Object,
            default: () => ({}),
        }
    },
    data () {
        return {
            
        };
    },
}
</script>

<style lang="scss" scoped>
    .sub-item {
        overflow: hidden;
        padding: 20px 0;

        & + .sub-item{
            border-top: 1px solid #e5e5ee;
        }

        .left {
            float: left;
            margin-right: -68px;

            .head {
                width: 48px;
                height: 48px;
                border-radius: 50%;
            }
        }

        .right {
            margin-left: 68px;

            .name{
                color: #333333;
                line-height: 1em;
            }

            .reply{
                margin-top: 16px;
                color: #666;
                line-height: 24px;
                overflow: hidden;

                .to{
                    float: left;

                    .name{
                        color: #333;
                        margin-left: .2em;
                    }
                }

                .text{
                    color: #666;
                }
            }
        }
    }

    .foot{
        ::v-deep {
            .btn {
                float: right;

                &+.btn{
                    margin-right: 44px;
                }
            }

            .addtime{
                float: left;
            }
        }
    }
</style>